import {defineComponent, Transition} from "vue";
import {useAppStore} from "@/stores/modules/app";
import DesktopNavMenu from "./DesktopNavMenu";
import {DesktopShortcut} from "./DesktopShortcut";
import {DesktopContextMenu} from "./DesktopContextMenu";
import Dock from "@layouts/base/dock";
import "../scss/Desktop.scss";
import Window from "@layouts/base/window";

/**
 * Desktop 组件
 * @date 2023/9/26
 */
export default defineComponent({
  name: "DesktopLayout",
  setup() {
    onMounted(() => {
      if (rootEl.value) {
        // 监听并阻止右键的默认行为
        rootEl.value.addEventListener("contextmenu", (e: Event) => {
          e.preventDefault();
        });
      }
      appStore.initShortcutList();
    });
    const rootEl = ref<HTMLElement>();
    // const { x, y } = useMouse({ target: rootEl.value });

    const isCalendarShow = ref(false);
    const isContextmenuShow = ref(false);

    const contextmenuTop = ref(0);
    const contextmenuLeft = ref(0);
    const offsetLeft = ref(0);
    const offsetTop = ref(0);
    // 根容器宽度
    const offsetWidth = ref(0);
    // 根容器高度
    const offsetHeight = ref(0);

    let appStore = useAppStore();
    const { appShortcutMap } = storeToRefs(appStore);

    /**
     * 隐藏桌面所有控制器
     */
    const hideAllController = () => {
      isContextmenuShow.value = false;
      isCalendarShow.value = false;
    };

    const contextMenuToggle = (e: MouseEvent) => {
      hideAllController();
      let element = rootEl.value;
      if (element) {
        // 根节点容器的初始定位
        if ("getBoundingClientRect" in element) {
          offsetLeft.value = element.getBoundingClientRect().left;
          offsetTop.value = element.getBoundingClientRect().top;
        }

        if ("offsetWidth" in element) {
          // 根节宽度
          offsetWidth.value = element.offsetWidth;
        }
        if ("offsetHeight" in element) {
          // 根节高度
          offsetHeight.value = element.offsetHeight;
        }
        // 最大可显示的宽度 = 桌面节点宽度 -  菜单本身的宽度 - 安全宽度 10px（防止菜单显示在视窗外）
        const maxWidth = offsetWidth.value - 180 - 10;
        // 最大可显示的高度 = 桌面节点高度 - 菜单本身的宽度 - 顶部菜单高度 - 程序坞的高度
        const maxHeight = offsetHeight.value - 180 - 30 - 30;
        const left = e.clientX - offsetLeft.value - 10;
        const top = e.clientY - offsetTop.value - 30;
        contextmenuTop.value = top > maxHeight ? maxHeight : top;
        contextmenuLeft.value = left > maxWidth ? maxWidth : left;
        isContextmenuShow.value = true;
      }
    };

    return () => (
      <main id="desktop" ref={rootEl} class="flex flex-col absolute inset-0 z-10">
        <DesktopNavMenu
          isCalendarShow={isCalendarShow.value}
          onUpdateCalendarShow={isShow => {
            isCalendarShow.value = isShow;
          }}
        />

        <div class="relative flex flex-row flex-grow" onContextmenu={contextMenuToggle} onClick={hideAllController}>
          {/* 桌面快捷方式图标 */}
          <DesktopShortcut appShortcuts={appShortcutMap.value} onOpenApp={appStore.openApp} />

          {/* 活动的应用程序 */}
          <div class="window-app">
            {Object.values(appShortcutMap.value)
              .filter((it: any) => it.isRunning)
              .map((item: any) => (
                <Transition name="zoom-fade" key={item.key}>
                  <Window app={item} v-show={!item.isHide} />
                </Transition>
              ))}
          </div>

          {/* 右键菜单 */}
          <Transition name="fade-menu">
            {isContextmenuShow.value ? <DesktopContextMenu top={contextmenuTop.value} left={contextmenuLeft.value} /> : null}
          </Transition>
        </div>

        {/* 程序坞 */}
        <Dock />
      </main>
    );
  },
});
